<template>
  <el-dialog
    v-model="userStore.clearRelationShow"
    :before-close="close"
    title="解除关联"
    width="30%"
  >
    <p style="line-height: 30px">
      <i class="jg-icon"></i>
      是否确认解除 <span class="text">{{ textOne }}</span> 与
      <span class="text">{{ textTwo }}</span> 的关联?
    </p>
    <template #footer>
      <span class="dialog-footer">
        <el-button class="cancel" @click="close">取消</el-button>
        <el-button type="primary" class="confirm" @click="confirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store'

const userStore = useUserStore()
// 声明事件
const emit = defineEmits(['clearRelationClick'])

defineProps({
  textOne: {
    type: String,
    default: '',
  },
  textTwo: {
    type: String,
    default: '',
  },
})

/** 取消 */
const close = () => {
  userStore.clearRelationShow = false
}

/** 确认 */
const confirm = () => {
  emit('clearRelationClick')
}
</script>

<style lang="scss" scoped>
.cancel:hover {
  color: #209dbe;
}
.cancel {
  width: 90px;
}
.confirm {
  width: 90px;
  border-color: #209dbe;
  background-color: #209dbe;
}

.jg-icon {
  display: inline-block;
  width: 28px;
  height: 24px;
  margin-right: 3px;
  background-image: url('@/assets/image/jg-icon.svg');
  background-size: 100% 100%;
  vertical-align: middle;
}

.text {
  color: #faad14;
}
</style>
